<template>
  <div class="apkContent">
    <div class="formConet">
      <div class="basic">安装包上传</div>
      <el-form ref="apkForm" :rules="apkFormRules" :model="apkForm" label-width="120px" class="demo-ruleForm">
        <el-row>
          <el-col :span="20">
            <el-form-item label="文件:">
              <el-upload class="upload-demo" drag name="multipartFile" :limit="1" :on-success="handleUploadSuccess"
                :before-upload="beforeUpload" :on-progress="handlerProgress" :action="action" :data="upData"
                :on-remove="handleRemove" :headers="headers" :on-error="fileUploadError" accept=".apk">
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="版本号:" prop="version">
              <el-input v-model.trim="apkForm.version" style="width: 100%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="更新链接:" prop="updateUrl">
              <el-input v-model.trim="apkForm.updateUrl" style="width: 100%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="APP类型:" prop="appType">
              <el-select v-model="apkForm.appType" style="width: 100%" popper-class="eloption" placeholder="请输入...">
                <el-option v-for="(val, key) in typeList" :key="key" :value="key" :label="val" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="是否强制更新:" prop="isForce">
              <el-radio-group v-model="apkForm.isForce" size="small">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="更新内容:" prop="content">
              <el-input v-model="apkForm.content" rows="5" maxlength="1000" show-word-limit type="textarea"
                style="width: 100%" placeholder="请输入..." />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="display: flex;justify-content: end;">
      <el-button class="submitBtn" style="width: 88px;" @click.stop="addApp">
        提交
      </el-button>
      <el-button style="width: 88px;" @click.stop="cancelbtn">
        取消
      </el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { getAPPType } from '@/api/dictionary';
import { addApp } from '@/api/h5';
export default {
  name: '',
  data() {
    return {
      headers: { token: getToken() },
      action: process.env.VUE_APP_UPLOAD_BASE_API + '/file/uploadFile',
      upData: {
        fileType: '2'
      },
      apkForm: {
        version: '',
        updateUrl: '',
        appType: '',
        isForce: '',
        content: ''
      },
      apkFormRules: {
        version: [
          {
            required: true,
            message: '请输入版本号',
            trigger: 'change'
          },
          {
            pattern: /^\d+(?:\.\d+){2}$/,
            message: '版本号格式为 x.x.x',
            trigger: 'blur'
          }
        ],
        updateUrl: [
          {
            required: true,
            message: '请输入更新链接',
            trigger: 'change'
          }
        ],
        appType: [
          {
            required: true,
            message: '请选择APP类型',
            trigger: 'change'
          }
        ],
        isForce: [
          {
            required: true,
            message: '请选择是否强制更新',
            trigger: 'change'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入更新内容',
            trigger: 'change'
          }
        ]
      },
      typeList: {}
    };
  },
  created() {
    this.getAPPType();
  },
  methods: {
    async getAPPType() {
      const res = await getAPPType();
      if (res.code === 200) {
        this.typeList = res.data;
        // console.log(this.typeList)
      }
    },
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      const extension = testmsg === 'apk';
      if (!extension) {
        this.$message({
          message: '上传文件只能是.apk格式!',
          type: 'warning'
        });
      }
      return extension;
    },
    fileUploadError(res) {
      console.log(res);
    },
    handleRemove() {
      this.apkForm.updateUrl = '';
    },
    handlerProgress() {

    },
    handleUploadSuccess(res) {
      console.log(this.$store.getters.imgBaseUrl);
      this.apkForm.updateUrl =
        this.$store.getters.imgBaseUrl +
        res.data.filePath +
        res.data.fileNewName;
      console.log(res);
      this.$message.success('上传成功');
    },
    addApp() {
      this.$refs.apkForm.validate(async valid => {
        if (valid) {
          const res = await addApp(this.apkForm);
          if (res.code === 200) {
            this.$message.success('添加成功');
            this.closeTag('apkInfo');
            this.$refs.apkForm.resetFields();
          } else {
            // this.$message.error(res.message);
          }
        }
      });
    },
    cancelbtn() {
      this.$refs.apkForm.resetFields();
      this.closeTag('apkInfo');
    }
  }
};
</script>

<style scoped lang="scss">
.apkContent {
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .formConet {
    background-color: #fff;
    // padding: 20px;

    .basic {
      font-family: PingFang SC, PingFang SC;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 32px;
    }
  }
}

::v-deep .el-row {
  margin-bottom: 20px;
}
</style>
